<template>
  <div class="min-h-screen bg-gray-50">
    <div class="container mx-auto max-w-5xl p-6">
      <!-- 基本信息 -->
      <div class="profile-section bg-white rounded-lg shadow-md mb-8 overflow-hidden">
        <div class="section-body">

          <div class="mx-auto max-w-7xl px-5">
            <!-- 顶部导航标签 -->
            <div class="following-tabs flex border-b border-gray-200 mb-6 overflow-x-auto">
              <button v-for="(tab, index) in tabs" :key="index" :class="[
                'tab-btn py-3 px-6 text-sm font-medium whitespace-nowrap relative transition-colors',
                currentTab === tab.key ? 'text-blue-500' : 'text-gray-500 hover:text-gray-700'
              ]" @click="tabChange(tab.key)">
                {{ tab.label }}
                <span v-if="currentTab === tab.key" class="absolute bottom-0 left-0 w-full h-0.5 bg-blue-500"></span>
              </button>
            </div>

            <!-- 关注动态列表 -->
            <div v-if="currentTab === 'dynamic' && followingDynamics.length > 0"
              class="following-list flex flex-col gap-6">
              <div v-for="(item, index) in followingDynamics" :key="index"
                class="following-item bg-white rounded-lg shadow-md p-4 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <div class="following-header flex items-center gap-4 mb-4">
                  <div
                    class="overflow-hidden following-avatar w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-lg font-bold text-blue-500 flex-shrink-0">
                    <img :src="item.avatar" class="w-full h-full object-cover " alt="">
                  </div>
                  <div class="following-info flex-1">
                    <div class="following-name font-semibold text-gray-900 flex items-center gap-2">
                      {{ item.userName }}
                      <i v-if="item.verified" class="fas fa-check-circle text-blue-500 text-sm"></i>
                    </div>
                    <div class="following-meta text-xs text-gray-500 flex items-center gap-4 mt-1">
                      <div class="following-time flex items-center gap-1">
                        <el-icon>
                          <Clock />
                        </el-icon>
                        <span>
                          <DateConvert :date="item.publishTime" />
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="following-action flex gap-2">
                    <button
                      class="following-action-btn unfollow flex items-center gap-1 text-red-500 border border-red-500 px-3 py-1 text-xs rounded-md hover:bg-red-50 transition-colors"
                      @click="unfollowItem(item)">
                      <i class="fas fa-times"></i>
                      <span>取消关注</span>
                    </button>
                  </div>
                </div>

                <div class="following-content text-sm text-gray-700 mb-4">
                  <p>发布了一篇新文章</p>
                </div>

                <div class="following-article bg-gray-50 rounded-md p-4 mb-4 border border-gray-200">
                  <h3 class="following-article-title font-semibold text-gray-900 mb-2 cursor-pointer"
                    @click="goDetails(item.newsId)">
                    <span class="hover:text-blue-500 transition-colors">{{ item.newsTitle }}</span>
                  </h3>
                  <div class="following-article-meta flex gap-4 text-xs text-gray-500">
                    <span v-for="(tag, tagIndex) in item.newsTags" :key="tagIndex">{{ tag }}</span>
                  </div>
                </div>

                <div class="following-actions flex justify-between border-t border-gray-100 pt-4">
                  <div class="following-reactions flex gap-6">
                    <button
                      class="reaction-btn flex items-center gap-1 text-gray-500 hover:text-blue-500 transition-colors"
                      :class="{ 'text-red-500': item.liked }" @click="toggleLike(item)">
                      <i :class="item.isLiked ? 'active' : ''" class="zan-icon"></i>
                      <span class="text-xs">{{ item.likeCount }}人已赞</span>
                    </button>
                    <!-- <button class="reaction-btn flex items-center gap-1 text-gray-500 hover:text-blue-500 transition-colors">
                <i class="far fa-comment"></i>
                <span class="text-xs">{{ item.comments }}</span>
              </button> -->
                    <button
                      class="reaction-btn flex items-center gap-1 text-gray-500 hover:text-blue-500 transition-colors"
                      @click="toggleFavorite(item)">
                      <el-icon>
                        <StarFilled />
                      </el-icon>
                      <span class="text-xs">已收藏({{ item.favoriteCount }})</span>
                    </button>
                  </div>
                  <!-- <button class="reaction-btn flex items-center gap-1 text-gray-500 hover:text-blue-500 transition-colors">
              <i class="fas fa-share-alt"></i>
              <span class="text-xs">分享</span>
            </button> -->
                </div>
              </div>
            </div>

            <!-- 我关注的用户列表 -->
            <div v-if="currentTab === 'user' && followingUsers.length > 0"
              class="following-users-list flex flex-col gap-6">
              <div v-for="(user, index) in followingUsers" :key="index"
                class="following-user-item bg-white rounded-lg shadow-md p-4 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <div class="following-header flex items-center gap-4">
                  <div
                    class="following-avatar w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-lg font-bold text-blue-500 flex-shrink-0">
                    <img :src="user.avatar" class="w-full h-full object-cover " alt="">
                  </div>
                  <div class="following-info flex-1">
                    <div class="following-name font-semibold text-gray-900 flex items-center gap-2">
                      {{ user.userName }}
                      <i v-if="user.verified" class="fas fa-check-circle text-blue-500 text-sm"></i>
                    </div>
                    <div class="following-description text-sm text-gray-500 mt-1">
                      {{ user.description }}
                    </div>
                  </div>
                  <div class="following-action flex gap-2">
                    <button
                      class="following-action-btn unfollow flex items-center gap-1 text-red-500 border border-red-500 px-3 py-1 text-xs rounded-md hover:bg-red-50 transition-colors"
                      @click="unfollowItem(user)">
                      <i class="fas fa-times"></i>
                      <span>取消关注</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 我关注的企业列表 -->
            <div v-if="currentTab === 'org_user' && followingOrgUsers.length > 0"
              class="following-companies-list flex flex-col gap-6">
              <div v-for="(company, index) in followingOrgUsers" :key="index"
                class="following-user-item bg-white rounded-lg shadow-md p-4 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <div class="following-header flex items-center gap-4">
                  <div
                    class="following-avatar w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-lg font-bold text-blue-500 flex-shrink-0">
                    <img :src="company.avatar" class="w-full h-full object-cover " alt="">
                  </div>
                  <div class="following-info flex-1">
                    <div class="following-name font-semibold text-gray-900 flex items-center gap-2">
                      {{ company.userName }}
                      <i v-if="company.verified" class="fas fa-check-circle text-blue-500 text-sm"></i>
                    </div>
                    <div class="following-description text-sm text-gray-500 mt-1">
                      {{ company.description }}
                    </div>
                  </div>
                  <div class="following-action flex gap-2">
                    <button
                      class="following-action-btn unfollow flex items-center gap-1 text-red-500 border border-red-500 px-3 py-1 text-xs rounded-md hover:bg-red-50 transition-colors"
                      @click="unfollowItem(company)">
                      <i class="fas fa-times"></i>
                      <span>取消关注</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 我关注的链主企业列表 -->
            <div v-if="currentTab === 'chain_enterprise' && followingChainEnterprises.length > 0"
              class="following-companies-list flex flex-col gap-6">
              <div v-for="(company, index) in followingChainEnterprises" :key="index"
                class="following-user-item bg-white rounded-lg shadow-md p-4 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <div class="following-header flex items-center gap-4">
                  <div
                    class="following-avatar w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-lg font-bold text-blue-500 flex-shrink-0">
                    <img :src="company.avatar" class="w-full h-full object-cover " alt="">
                  </div>
                  <div class="following-info flex-1">
                    <div class="following-name font-semibold text-gray-900 flex items-center gap-2">
                      {{ company.userName }}
                      <i v-if="company.verified" class="fas fa-check-circle text-blue-500 text-sm"></i>
                    </div>
                    <div class="following-description text-sm text-gray-500 mt-1">
                      {{ company.description }}
                    </div>
                  </div>
                  <div class="following-action flex gap-2">
                    <button
                      class="following-action-btn unfollow flex items-center gap-1 text-red-500 border border-red-500 px-3 py-1 text-xs rounded-md hover:bg-red-50 transition-colors"
                      @click="unfollowItem(company)">
                      <i class="fas fa-times"></i>
                      <span>取消关注</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 空状态 -->
            <div v-if="showEmptyState" class="empty-state text-center ">
              <div class="empty-icon text-5xl text-gray-300 mb-4">
                <i :class="emptyStateIcon"></i>
              </div>
              <div class="empty-text text-xl font-medium text-gray-700 mb-2">{{ emptyStateText }}</div>
              <div class="empty-subtext text-gray-500 mb-6">关注感兴趣的内容，获取实时资讯</div>
              <!-- <button
          class="empty-btn bg-blue-500 text-white px-4 py-2 rounded-md flex items-center gap-2 mx-auto hover:bg-blue-600 transition-colors">
          <i class="fas fa-compass"></i>
          <span>去探索</span>
        </button> -->
            </div>

            <!-- 分页 -->
            <div class="pagination flex justify-center py-8" v-if="total > 0">
              <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="total" :pager-count="7"
                layout="prev, pager, next" background />
            </div>
          </div>


        </div>
      </div>
    </div>


  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Star, ChatLineRound, Share, Delete, StarFilled, Clock } from '@element-plus/icons-vue';
import { getUserFollows, getUserFollowNews, performUserAction } from '@/api/userAction';
import { useRouter } from "vue-router";
const router = useRouter()
// 标签页数据
const tabs = [
  { key: 'dynamic', label: '动态' },
  { key: 'user', label: '我关注的用户' },
  { key: 'org_user', label: '机构用户' },
  { key: 'chain_enterprise', label: '链主企业' },
];

// 当前选中的标签
const currentTab = ref('dynamic');

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 跳转详情页
const goDetails = (id) => {
  const targetRoute = router.resolve({ path: '/information/informationDetails', query: { id } });
  window.open(targetRoute.href, '_blank');
}

onMounted(() => {
  getUserFollowsFun();
  getUserFollowNewsFun();
});

const tabChange = (key) => {
  currentTab.value = key;
  if (key === 'dynamic') {
    getUserFollowNewsFun();
  } else {
    getUserFollowsFun();
  }
}

// 获取用户关注列表
const getUserFollowsFun = () => {
  followingUsers.value = [];
  followingOrgUsers.value = [];
  followingChainEnterprises.value = [];
  getUserFollows({ pageNum: currentPage.value, pageSize: pageSize.value, businessType: currentTab.value }).then(res => {
    console.log('获取用户关注成功', res);
    if (currentTab.value === 'user') {
      followingUsers.value = res.data.list;
    } else if (currentTab.value === 'org_user') {
      followingOrgUsers.value = res.data.list;
    } else if (currentTab.value === 'chain_enterprise') {
      followingChainEnterprises.value = res.data.list;
    }
    total.value = res.data.total;
  })
}

// 获取用户关注动态
const getUserFollowNewsFun = () => {
  getUserFollowNews({ pageNum: currentPage.value, pageSize: pageSize.value }).then(res => {
    console.log('获取用户关注动态成功', res);
    followingDynamics.value = res.data.list;
    total.value = res.data.total;
  })
}

// 关注动态数据
const followingDynamics = ref([]);
// 关注的用户数据
const followingUsers = ref([]);
// 关注的机构用户
const followingOrgUsers = ref([]);
// 关注的链主企业
const followingChainEnterprises = ref([]);

// 计算是否显示空状态
const showEmptyState = computed(() => {
  if (currentTab.value === 'dynamic' && followingDynamics.value.length === 0) return true;
  if (currentTab.value === 'user' && followingUsers.value.length === 0) return true;
  if (currentTab.value === 'org_user' && followingOrgUsers.value.length === 0) return true;
  if (currentTab.value === 'chain_enterprise' && followingChainEnterprises.value.length === 0) return true;
  return false;
});

// 计算空状态图标
const emptyStateIcon = computed(() => {
  switch (currentTab.value) {
    case 'dynamic': return 'fas fa-heart';
    case 'user': return 'fas fa-user';
    case 'org_user': return 'fas fa-building';
    case 'chain_enterprise': return 'fas fa-building';
    default: return 'fas fa-heart';
  }
});

// 计算空状态文本
const emptyStateText = computed(() => {
  switch (currentTab.value) {
    case 'dynamic': return '暂无关注动态';
    case 'user': return '暂无关注用户';
    case 'org_user': return '暂无关注企业';
    case 'chain_enterprise': return '暂无关注企业';
    default: return '暂无关注内容';
  }
});

// 取消关注
const unfollowItem = (item) => {
  const businessType = currentTab.value === 'user' ? 'user' : currentTab.value === 'org_user' ? 'org_user' : currentTab.value === 'chain_enterprise' ? 'chain_enterprise' : '';
  // 确认是否删除
  ElMessageBox.confirm('确定要取消关注吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    performUserAction({
      targetId: item.userId,
      businessType: businessType,
      actionType: 'follow'
    }).then(res => {
      getUserFollowNewsFun();
      getUserFollowsFun();
    })
  })
};

// 取消收藏
const toggleFavorite = (item) => {
  // 确认是否收藏
  ElMessageBox.confirm('确定要取消收藏吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    performUserAction({
      targetId: item.newsId,
      businessType: 'news',
      actionType: 'favorite'
    }).then(res => {
      getUserFollowNewsFun();
    })
  })
};


// 点赞/取消点赞
const toggleLike = (item) => {
  // 确认是否点赞
  ElMessageBox.confirm(`确定要${item.isLiked ? '取消点赞' : '点赞'}吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    performUserAction({
      targetId: item.newsId,
      businessType: 'news',
      actionType: 'like'
    }).then(res => {
      getUserFollowNewsFun();
    })
  })

};
</script>

<style scoped>
.following-tabs {
  -webkit-overflow-scrolling: touch;
}

.tab-btn {
  position: relative;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background-color: var(--el-color-primary);
}

.el-pagination {
  --el-pagination-button-bg-color: transparent;
}
</style>
